<template>
  <div>
    <h2>Home:{{ $store.state.counter }}</h2>
    <hr>
    <h2>{{sCounter}}</h2>
    <h2>{{counter}}</h2>
    <h2>{{name}}</h2>
    <h2>{{age}}</h2>
    <h2>{{height}}</h2>
    --------
    <h1>{{sName}}{{sAge}}</h1>
    <hr>
  </div>
</template>

<script>
  import { mapState, useStore} from 'vuex'
  import { computed } from 'vue'

  export default {
    computed: {
      fullName: function() {
        return "1fdasfdasfad"
      },
      ...mapState(["name", "age"]),
      // ...mapState(["counter", "name", "age", "height"])
      //  counter:function(){},
      //  name:function(){},
      //   age:function(){},
      //   height:function(){}

    },


    setup() {


      // this.$router.push('/home')

      const store = useStore()

      const sCounter = computed(() => store.state.counter)
      // const sName = computed(() => store.state.name)
      // const sAge = computed(() => store.state.age)

      const storeStateFns = mapState(["counter", "name", "age", "height"])
      // {
      //   counter:function(){},
      //   name:function(){return this.$store.state.name},
      //   age:function(){},
      //   height:function(){}
      // }
      // const counter = computed(function(){})
    
      // {name: function, age: function, height: function}
      // {name: ref, age: ref, height: ref}
      // [counter,name,age,height]
      
      const storeState = {}
      Object.keys(storeStateFns).forEach(fnKey => {
        // const fn = storeStateFns[fnKey].bind({$store: store})
        const fn = storeStateFns[fnKey].bind({$store:store})
        storeState[fnKey] = computed(fn)
      })

      return {
        sCounter,
        ...storeState
      }
    }
  }
</script>

<style scoped>

</style>